import React, {Component} from 'react';
import {
  Dimensions,
  StyleSheet,
  View,
  Animated,
  Easing,
  Text,
  Button,
} from 'react-native';
import {RNCamera} from 'react-native-camera';


const options = {
  title: '请选择',
  quality: 0.8,
  cancelButtonTitle: '取消',
  takePhotoButtonTitle: null,
  chooseFromLibraryButtonTitle: '选择相册',
  customButtons: [{name: 'hangge', title: '输入编码'}],
  allowsEditing: true,
  noData: false,
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

export default class App extends Component {

  //构造函数
  constructor(props) {
    super(props);
    this.state = {
      torchState: 'off',
      qrCode: null,
    };
    this.moveAnim = new Animated.Value(0);
  }

  componentDidMount() {
    this.startAnimation();
    this.props.navigation.setParams({
      torchState: this.state.torchState,
    });
  }

  _onBarCodeRead = (value) => {
    const {qrCode} = this.state;
    if (qrCode) {
      return;
    }
    this.setState(
      {
        qrCode: value,
      },
      () => {
        alert('ddgg'+this.state.qrCode.data);   // 打印出扫描后的数据
      },
    );
  };

  // 扫描动画
  startAnimation = () => {
    this.moveAnim.setValue(0);
    Animated.timing(this.moveAnim, {
      toValue: 1,
      duration: 1500,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(() => this.startAnimation());
  };

  //渲染
  render() {
    const winWidth = Dimensions.get('window').width;
    const winHeight = Dimensions.get('window').height;
    return (
      <View style={styles.container}>
<RNCamera
  style={styles.preview}
  ratio={'16:9'}
  defaultVideoQuality={RNCamera.Constants.VideoQuality['720p']}
  scanAreaLimit={true}
  scanAreaX={(115 * winWidth) / 750}
  scanAreaY={(328 * winHeight) / 1334}
  scanAreaWidth={(522 * winWidth) / 750}
  scanAreaHeight={(521 * winHeight) / 1334}
  flashMode={
    this.state.torchState == 'off'
      ? RNCamera.Constants.FlashMode.off
      : RNCamera.Constants.FlashMode.torch
  }
  barCodeTypes={[
    RNCamera.Constants.BarCodeType.qr,
    RNCamera.Constants.BarCodeType.code39
  ]}
  onBarCodeRead={this._onBarCodeRead.bind(this)}
>
  <View style={styles.rectangleContainer}>
    <View style={styles.rectangle} />
    <Animated.View
      style={[
        styles.border,
        {
          transform: [
            {
              translateY: this.moveAnim.interpolate({
                inputRange: [0, 1],
                outputRange: [-200, 0],
              }),
            },
          ],
        },
      ]}
    />
    <Text style={styles.rectangleText}>
      将二维码放入框内，即可自动扫描
    </Text>
  </View>
</RNCamera>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  btnText: {color: 'white', fontSize: 16},
  rectangleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },
  rectangle: {
    height: 200,
    width: 200,
    borderWidth: 1,
    borderColor: '#00FF00',
    backgroundColor: 'transparent',
  },
  rectangleText: {
    flex: 0,
    color: '#fff',
    marginTop: 10,
  },
  border: {
    flex: 0,
    width: 200,
    height: 2,
    backgroundColor: '#00FF00',
  },
  rightBtn: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
});
